<template>
    <div class="list-wrapper">
        <Block>
            <DataGrid :auto-load="autoLoad" row-key="id" border ref="dataGridRef">
                <template #toolbar-search>
                    <div class="query-from-box">
                        <el-form>
                            <el-form-item>
                                <el-input
                                    v-model.trim="queryData.componentKey"
                                    placeholder="网络组件名称/标识符"
                                    clearable
                                    maxlength="50"
                                />
                            </el-form-item>
                            <el-form-item v-show="false">
                                <el-input />
                            </el-form-item>
                        </el-form>
                    </div>
                </template>
                <template #toolbar-operation>
                    <el-button type="primary" @click="operCollect('创建')">新建</el-button>
                </template>
                <el-table-column type="index" label="序号" width="60" align="center" fixed />
                <el-table-column label="网络组件名称" width="150" show-overflow-tooltip fixed>
                    <template #default="scope">
                        <el-button link type="primary" @click="operCollect('详情', scope.row)">
                            {{ scope.row.componentName }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="componentNo" label="标识符" show-overflow-tooltip />
                <el-table-column prop="protocolType" label="所属协议" show-overflow-tooltip />
                <el-table-column prop="address" label="服务地址" show-overflow-tooltip />
                <el-table-column prop="port" label="服务端口" show-overflow-tooltip />
                <el-table-column label="操作" width="135" fixed="right">
                    <template #default="scope">
                        <el-button link type="primary" @click="operCollect('修改', scope.row)"> 修改 </el-button>
                        <el-button link type="danger" @click="operCollect('删除', scope.row)"> 删除 </el-button>
                    </template>
                </el-table-column>
            </DataGrid>
        </Block>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { runNetworkComponentService } from '@great/services';
import { showPopupBox } from '@great/utils';
import DialogModal from './components/DialogModal.vue';
import { Block, DataGrid, type DataGridInstance } from '@great/components';
import { checkPermi } from '@/utils/ruoyi';
import { ScriptType } from '@/utils/constant';

const { proxy } = getCurrentInstance() as any;

// 查询条件
const queryData = ref({
    componentKey: ''
});
const dataGridRef = useTemplateRef<DataGridInstance>('dataGridRef');
const autoLoad = reactive({
    debounce: true,
    reloadDeps: [queryData],
    onLoad: async (current, size) => {
        const res: any = await runNetworkComponentService.getNetworkComponentPageList({
            current,
            size,
            componentKey: queryData.value.componentKey
        });
        return { data: res.data.records, total: res.data.total };
    }
});

/**
 * 操作收集
 * @param type 操作类型
 * @param row 操作行数据
 */
const operCollect = async (type: string, row?: any) => {
    switch (type) {
        case '创建':
            showPopupBox(DialogModal, {
                getList: dataGridRef.value?.reset as () => Promise<void>
            });
            break;
        case '详情':
            if (checkPermi(['system:script:detail'])) {
                showPopupBox(DialogModal, {
                    row,
                    readonly: true
                });
            }
            break;
        case '修改':
            showPopupBox(DialogModal, {
                row,
                getList: dataGridRef.value?.refresh as () => Promise<void>
            });
            break;
        case '删除':
            ElMessageBox.confirm(`确认删除网络组件${row?.appName || ''}吗？`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    await runNetworkComponentService.delNetWorkComponent(row?.id);
                    ElNotification({
                        title: '删除成功！',
                        type: 'success'
                    });
                    dataGridRef.value?.refresh();
                })
                .catch(() => {});
            break;
    }
};
</script>
<style scoped lang="scss">
.list-wrapper {
    .query-from-box {
        display: flex;
        align-items: center;
        .el-form {
            display: flex;
            .el-form-item {
                margin-bottom: 0;
                width: 100px;
                &:first-of-type {
                    width: 130px;
                }
                &:last-of-type {
                    width: 240px;
                }
            }
            .el-form-item + .el-form-item {
                margin-left: 10px;
            }
        }
    }
    :deep(.data-grid) {
        .table-item-status {
            display: flex;
            align-items: center;
            &::before {
                content: '';
                width: 6px;
                height: 6px;
                display: inline-block;
                border-radius: 50%;
                margin-right: 5px;
            }
        }
        .table-item-status[status='未激活'] {
            &::before {
                background-color: #909399;
            }
        }
        .table-item-status[status='激活'] {
            &::before {
                background-color: #67c23a;
            }
        }
    }
}
</style>
